<template>
  <div
    role="tooltip"
    aria-hidden="true"
    class="van_popover van_popper van_popper_vip"
    tabindex="0"
    style="transform-origin: center top; z-index: 2297; left: -110px"
  >
    <div class="vip_m">
      <div class="bubble_traditional">
        <div class="recommand">
          <div class="title">精彩推荐</div>
          <div class="bubble_col bubble_col_1">
            <div class="item">
              <a href="javascript:;" class="pic">
                <img src="/static/bg/vip_recommend.png" />
              </a>
              <a href="javascript:;" class="recommand_link"
                >大会员可畅享各种专属内容，还有游戏礼包、个性装扮等你来拿~</a
              >
            </div>
          </div>
          <div class="renew_btn">
            <div class="button">开通大会员</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.van_popover.van_popper.van_popper_vip {
  padding: 0;
  border: none;
  top: 44px !important;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.vip_m {
  width: 260px;
  .bubble_traditional {
    padding: 14px;
    .recommand {
      .title {
        color: #212121;
        font-size: 14px;
        margin: 5px 0 12px;
        font-weight: 900;
      }
      .bubble_col {
        .item {
          display: inline-block;
          margin-bottom: 7px;
          .pic {
            display: inline-block;
          }
          .recommand_link {
            margin-top: 10px;
            font-size: 14px;
            color: #222;
            text-align: left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            word-break: break-all;
            line-height: 18px;
            overflow: hidden;
          }
          img {
            border-radius: 2px;
            background-color: #ccc;
            display: block;
          }
        }
      }
      .bubble_col.bubble_col_1 {
        .item {
          width: 100%;
        }
        img {
          width: 230px;
          height: 68px;
        }
      }
      .renew_btn {
        margin-top: 20px;
        text-align: center;
        position: relative;
        .button {
          width: 160px;
          height: 32px;
          line-height: 32px;
          margin: 0 auto;
          background-color: #00a1d6;
          color: #fff;
          border: none;
          border-radius: 2px;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            background-color: #00b5e5;
          }
        }
      }
    }
  }
}
</style>